<template>
  <el-main>
    <div class="search">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="策略搜索：">
          <el-input v-model="form.value" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="main">
      <div class="btn-top">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="dialogFormVisible = true"
          >新建</el-button
        >
      </div>
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column fixed prop="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="policyName" label="策略名称" width="428">
        </el-table-column>
        <el-table-column prop="discount" label="策略方案" width="429">
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期" width="160">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" prop="taskId">
          <template v-slot="{ row }">
            <el-button @click.native.prevent="watchDetailsFn(1,row)" type="text">
              查看详情
            </el-button>
            <el-button @click.native.prevent="onConfigFn(row)" type="text">
              修改
            </el-button>
            <el-button
              @click.native.prevent="deleteRowFn(row)"
              type="text"
              style="color: #ff5a5a"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer" v-if="isShow">
        <div>
          <span
            >共{{ totalCount }}条数据 第{{ pageIndex }}/{{ totalPage }}页</span
          >
          <button
            class="add"
            :class="{ active: pageIndex === '1' }"
            @click="addFn"
            ref="btn"
          >
            上一页
          </button>
          <button
            class="next"
            :class="{ active: pageIndex === totalPage }"
            @click="nextFn"
          >
            下一页
          </button>
        </div>
      </div>
    </div>
    <el-dialog
      :title="clickType ? '修改策略' : '新增策略'"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      :before-close="closeFn"
    >
      <el-form
        ref="new"
        :model="dialogForm"
        label-width="98px"
        label-position="right"
        :rules="rules"
      >
        <el-form-item label="策略名称:" prop="policyName">
          <el-input
            v-model="dialogForm.policyName"
            label-width="180px"
            placeholder="请输入"
            show-word-limit
            maxlength="15"
            @input="getOperList"
          ></el-input>
        </el-form-item>
        <el-form-item label="策略方案:" prop="discount">
          <el-input-number
            v-model="dialogForm.discount"
            controls-position="right"
            placeholder="请输入"
            :min="1"
            :max="100"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="onConfig">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="策略详情"
      :visible.sync="dialogTableVisible"
      :append-to-body="true"
      id="look"
    >
      <el-form label-width="98px" label-position="right">
        <el-form-item label="策略名称:">
          <span>{{title}}</span>
        </el-form-item>
        <el-form-item label="策略方案:" class="box">
          <el-table :data="lookTableData" style="width: 100%">
            <el-table-column fixed prop="index" label="序号" width="80">
            </el-table-column>
            <el-table-column prop="nodeName" label="点位名称" width="158">
            </el-table-column>
            <el-table-column prop="innerCode" label="设备编号" width="158">
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>  <div class="bottom" v-if="isLookShow">
        <div>
          <span
            >共{{ looktotalCount }}条数据 第{{ lookpageIndex }}/{{ looktotalPage }}页</span
          >
          <button
            class="add"
            :class="{ active: lookpageIndex === '1' }"
            @click="lookAddFn"
            ref="btn"
          >
            上一页
          </button>
          <button
            class="next"
            :class="{ active: lookpageIndex === looktotalPage }"
            @click="lookNextFn"
          >
            下一页
          </button>
        </div>
      </div></el-form-item>
      </el-form>

    </el-dialog>
  </el-main>
</template>

<script>
import {
  getSearch,
  delPolicy,
  postPolicy,
  putPolicy,
  getVmList
} from '@/api/celue/stategy'
import { Message } from 'element-ui'
import { getRepairerList, getTaskInfo } from '@/api/article'
export default {
  data () {
    return {
      loading: true,
      num: 10,
      goodData: [],
      getGoodData: [],
      rules: {
        policyName: [
          {
            required: true,
            message: '请输入',
            trigger: ['blur', 'change']
          }
        ],
        discount: [
          {
            required: true,
            message: '请输入',
            trigger: ['blur', 'change']
          }
        ]
      },
      dialogFormVisible: false,
      dialogTableVisible: false,
      dialogLimitNumber: false,
      dialogWorkDetails: false,
      dialogForm: {
        policyName: '',
        discount: ''
      },
      formLabelWidth: '120px',
      form: {
        value: ''
      },
      tableData: [],
      pageIndex: '',
      totalPage: '',
      totalCount: '',
      lookTableData: [],
      lookpageIndex: '',
      looktotalPage: '',
      looktotalCount: '',
      userList: [],
      workDetails: {},
      show: false,
      typeName: '',
      clickType: false,
      lookPolicyId: '',
      title: ''
    }
  },
  async created () {
    this.getFn(1)
  },
  mounted () {},
  methods: {
    async deleteRow (taskId) {
      this.dialogWorkDetails = true
      this.workDetails = await getTaskInfo(taskId)
      this.typeName = this.workDetails.taskStatusTypeEntity.statusName
      this.show = true
    },
    deleteRowFn (row) {
      delPolicy(row.policyId, {
        pageIndex: this.pageIndex,
        pageSize: 10,
        policyName: row.policyName
      })
      this.getFn(1)
    },
    closeFn () {
      this.dialogFormVisible = false
      this.$refs.new.resetFields()
    },
    async getOperList (val) {
      if (val) {
        const res = await getRepairerList(val)
        if (res) {
          this.userList = res
        }
      }
    },
    onConfigFn (row) {
      this.dialogForm.discount = row.discount
      this.dialogForm.policyName = row.policyName
      this.policyId = row.policyId
      this.dialogFormVisible = true
      this.clickType = true
    },
    async onConfig () {
      if (this.clickType) {
        try {
          await putPolicy(this.policyId, this.dialogForm)
          this.getFn(1)
          this.closeFn()
        } catch (error) {
          Message({
            message: error.response.data,
            type: 'error',
            customClass: 'message'
          })
        } finally {
          this.clickType = true
        }
      } else {
        try {
          await postPolicy(this.dialogForm)
          this.getFn(1)
          this.closeFn()
        } catch (error) {
          Message({
            message: error.response.data,
            type: 'error',
            customClass: 'message'
          })
        }
      }
    },
    async getFn (num, policyName) {
      const res = await getSearch({
        pageIndex: num,
        pageSize: 10,
        policyName
      })
      this.pageIndex = res.pageIndex
      this.totalPage = res.totalPage
      this.totalCount = res.totalCount
      res.currentPageRecords.forEach((item, i) => {
        item.index = (res.pageIndex - 1) * 10 + i + 1
      })
      res.currentPageRecords.forEach((item) => {
        item.createTime = item.createTime
          .replace(/[-]/g, '.')
          .replace(/[T]/, ' ')
      })
      this.tableData = res.currentPageRecords
      this.loading = false
    },
    onSubmit () {
      this.getFn(1, this.form.value)
    },
    addFn () {
      if (this.pageIndex === 1) {
        return
      }
      const num = Number(this.pageIndex) - 1
      this.getFn(num, this.form.value)
    },
    nextFn () {
      if (this.totalCount === this.totalPage) {
        return
      }
      const num = Number(this.pageIndex) + 1
      this.getFn(num, this.form.value)
    },
    lookAddFn () {
      if (this.lookpageIndex !== 1) {
        const num = Number(this.lookpageIndex) - 1
        this.watchDetailsFn(num)
      }
    },
    lookNextFn () {
      if (this.looktotalCount !== this.looktotalPage) {
        const num = Number(this.lookpageIndex) + 1
        this.watchDetailsFn(num)
      }
    },
    async watchDetailsFn (pageIndex, row) {
      if (row) {
        this.lookPolicyId = row.policyId
        this.title = row.policyName
      }
      this.dialogTableVisible = true
      const res = await getVmList(this.lookPolicyId, { pageIndex, pageSize: 10 })
      this.lookpageIndex = res.pageIndex
      this.looktotalPage = res.totalPage
      this.looktotalCount = res.totalCount
      res.currentPageRecords.forEach((item, i) => {
        item.index = (res.pageIndex - 1) * 10 + i + 1
      })

      this.lookTableData = res.currentPageRecords
    }
  },
  computed: {
    isShow () {
      return this.totalCount > 10
    },
    isLookShow () {
      return this.looktotalCount > 10
    }
  }
}
</script>

<style lang="less" scoped>
.message {
  z-index: 99999 !important;
}

/deep/ .el-dialog {
  width: 630px;
  height: 270px;
  border-radius: 10px;
  .el-dialog__title {
    font-size: 16px;
    font-weight: 700;
  }
  .el-dialog__body {
    padding: 15px 20px 0px;
    label,
    input {
      line-height: 36px !important;
      height: 36px !important;
    }
    input {
      width: 400px;
    }
    .el-input-number {
      width: 400px;
    }
  }
  .el-dialog__footer {
    position: absolute;
    bottom: 13px;
    left: 0;
    width: 100%;
    button {
      height: 36px !important;
      width: 80px !important;
      margin: 0 18px;
    }
    text-align: center;
    .el-button--primary {
      background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
      border: none;
      text-indent: -2.5px;
      &:hover {
        background: linear-gradient(135deg, #ff7d43, #db3602) !important;
      }
    }
    .el-button--default {
      background-color: #fbf4f0;
      border: none;
      color: #655b56 !important;
      text-indent: -8px;
      &:hover {
        background-color: #f3e7e1 !important;
      }
    }
  }
  form {
    padding: 0 50px 0 40px;
    label {
      padding-right: 22px;
    }
  }
}
.el-main {
  width: calc(100vw - 160px);
  min-height: 100%;
  background-color: #f8fafd;
  .search {
    width: 100%;
    height: 62px;
    padding-left: 17px;
    padding-top: 13px;
    background-color: #fff;
    /deep/ .el-form {
      label,
      input {
        line-height: 36px !important;
        height: 36px !important;
      }
      button {
        margin-top: 3px;
        height: 36px !important;
        background-color: #5f84ff;
        border-color: #5f84ff;
        width: 80px;
        text-indent: -3px;
      }
    }
  }
  /deep/ .main {
    min-height: 200px;
    margin-top: 20px;
    margin-bottom: 60px;
    padding: 20px 15px 19px 17px;
    background-color: #fff;
    .btn-top {
      height: 36px !important;
      margin-bottom: 20px;
      button {
        height: 36px !important;
        width: 80px !important;
      }
      .el-button--primary {
        background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
        border: none;
        text-indent: -2.5px;
        &:hover {
          background: linear-gradient(135deg, #ff7d43, #db3602) !important;
        }
      }
      .el-button--default {
        background-color: #fbf4f0;
        border: none;
        color: #655b56 !important;
        text-indent: -8px;
        &:hover {
          background-color: #f3e7e1 !important;
        }
      }
    }
    .el-table {
      border: none;
      td,
      tr,
      th {
        color: #666;
        font-weight: 400;
        text-align: center;
        border: none !important;
      }
      th {
        background-color: #f3f6fb !important;
      }
    }
    .footer {
      height: 96px;
      padding: 32px;
      > div {
        display: flex;
        height: 32px;
        span {
          flex: 1;
          color: #dbdfe5;
          font-size: 16px;
        }
        button {
          width: 70px;
          height: 32px;
          margin: 0 16px;
          font-size: 13px;
          text-align: center;
          line-height: 32px;
          border: none;
          cursor: pointer;
          border-radius: 3px;
        }
        .add {
          color: #606266;
          background-color: #d5ddf8;
        }
        .next {
          color: #606266;
          background-color: #d5ddf8;
        }
        .active {
          color: #d8dde3 !important;
          cursor: not-allowed;
          background: #edf0f9;
        }
      }
    }
  }
}
/deep/ .el-form {
  .el-form-item__content {
    height: 36px;
    line-height: 36px;
  }
}
#look {
  /deep/ .el-dialog {
    height: 720px !important;
.el-dialog__body{
  height: 100%;
  max-height: 667px;
}
    .el-form {
      padding: 0;
      .el-table {
        border: none;
        td,
        tr,
        th {
          height: 42px !important;
          color: #666;
          font-weight: 400;
          text-align: center;
          border: none !important;
        }
        th {
          background-color: #f3f6fb !important;
        }
      td{
            padding: 9px 0;
            background-color: #fcfdfe;
          }
      }
      .bottom{
    position: absolute;
    bottom: -275px;
   height: 96px;
   width: 396px;
      padding: 20px 19px;
      > div {
        display: flex;
        height: 32px;
        span {
          flex: 1;
          color: #dbdfe5;
          font-size: 16px;
        }
        button {
          width: 70px;
          height: 32px;
          margin: 0 10px;
          font-size: 13px;
          text-align: center;
          line-height: 32px;
          border: none;
          cursor: pointer;
          border-radius: 3px;
        }
        .add {
          color: #606266;
          background-color: #d5ddf8;
        }
        .next {
          color: #606266;
          background-color: #d5ddf8;
        }
        .active {
          color: #d8dde3 !important;
          cursor: not-allowed;
          background: #edf0f9;
        }
      }
      }
      .box {
        min-height: 110px !important;
        .el-form-item__content,
        .el-form-item__label {
          min-height: 260px !important;
        }
        .el-form-item__content {
          width: 396px;
        }
      }

    }
  }
}
</style>
